import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native';
import {ObserverText, ObserverView} from '../../../components';
import {dpw12, dpw4, dpw44, dpw48} from '../../../constants';
import {useEffect, useRef} from 'react';
import {
  SvgDir,
  SvgHeart,
  SvgHeartFill,
  SvgLeft,
  SvgNextPage,
  SvgPrePage,
  SvgSet,
} from '../../../components/svg';

const foods = [
  {
    title: 'catalogue',
    icon: <SvgDir />,
    id: 1,
  },
  {
    title: 'previous',
    icon: <SvgPrePage />,
    id: 2,
  },
  {
    title: 'next',
    icon: <SvgNextPage />,
    id: 3,
  },
  {
    title: 'focus',
    titleAct: 'hasFocus',
    icon: <SvgHeart />,
    iconAct: <SvgHeartFill />,
    id: 4,
  },
  {
    title: 'set',
    icon: <SvgSet />,
    id: 5,
  },
];

const ScrollHead = ({goBack, title, isShow = true}: any) => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: isShow ? 1 : 0,
      duration: 150,
      useNativeDriver: true,
    }).start();
  }, [isShow]);

  return (
    <Animated.View
      style={[
        styles.header,
        {height: dpw44, top: 0, opacity: fadeAnim, zIndex: isShow ? 99 : -1},
      ]}>
      <ObserverView
        style={{
          ...styles.titles,
          height: dpw44,
          paddingHorizontal: dpw12,
          justifyContent: 'flex-start',
        }}>
        <TouchableOpacity onPress={goBack}>
          <SvgLeft />
        </TouchableOpacity>
        <ObserverText
          style={{paddingLeft: dpw12}}
          tKey={title}
          type="head"
          numberOfLines={1}
          ellipsizeMode="tail"
        />
      </ObserverView>
    </Animated.View>
  );
};

const ScrollFood = ({
  openDir,
  goPrePage,
  goNextPage,
  onChangeFocus,
  openSet,
  hasFollow,
  isShow = true,
  isPreDis,
  isNextDis,
}: any) => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: isShow ? 1 : 0,
      duration: 150,
      useNativeDriver: true,
    }).start();
  }, [isShow]);

  const onClick = (id: number) => {
    switch (id) {
      case 1:
        openDir();
        break;
      case 2:
        goPrePage();
        break;
      case 3:
        goNextPage();
        break;
      case 4:
        onChangeFocus();
        break;
      case 5:
        openSet();
        break;
      default:
        break;
    }
  };

  return (
    <Animated.View
      style={[
        styles.header,
        {
          height: dpw48,
          paddingVertical: dpw4,
          bottom: 0,
          opacity: fadeAnim,
          zIndex: isShow ? 99 : -1,
        },
      ]}>
      <ObserverView style={{...styles.titles, height: dpw48}}>
        {foods.map(fd => {
          let icon: any = fd.icon;
          let title: string = fd.title;
          let type: any;
          if (fd.id === 4 && hasFollow) {
            icon = fd.iconAct;
            title = fd.titleAct || '';
          } else if (fd.id === 2 && !isPreDis) {
            icon = <SvgPrePage colorKey="color_4" />;
            type = 'desc';
          } else if (fd.id === 3 && !isNextDis) {
            icon = <SvgNextPage colorKey="color_4" />;
            type = 'desc';
          }

          return (
            <TouchableOpacity
              onPress={() => onClick(fd.id)}
              key={fd.id}
              style={{
                alignItems: 'center',
                flex: 1,
                justifyContent: 'center',
              }}>
              {icon}
              <ObserverText tKey={title} size="mini" type={type} />
            </TouchableOpacity>
          );
        })}
      </ObserverView>
    </Animated.View>
  );
};

export {ScrollHead, ScrollFood};

const styles = StyleSheet.create({
  header: {
    width: '100%',
    position: 'absolute',
    left: 0,
  },
  titles: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
});
